<template>
  <div id="app">
    <div class="cont">
      <img v-if="imgname.split(',')[0]" v-lazy="imgname.split(',')[0]" alt="" />
      <div class="title">
        <p>
          <span>{{ label }}</span>
          <span>{{ title }}</span>
        </p>
      </div>
      <div class="footer">
        <span>
          <van-icon class="position" name="map-marked" />
          {{ site }}
        </span>
        <!-- <span> <van-icon name="good-job-o" />{{ fnum }}</span> -->
      </div>
      <!-- <div class="but">
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  props: ['title', 'label', 'imgname', 'site', 'fnum'],
}
</script>

<style lang="scss" scoped>
#app {
  // width: 300px;
  font-size: 20px;
  margin: 0;
  color: black;
  padding: 0;
  padding-bottom: 8px;
  margin-bottom: 15px;
  border-radius: 10px;
  // background: red;
  overflow: hidden;
}

.cont {
  border-radius: 10px;
  width: 160px;
  font-family: '黑体';
  text-align: center;
  padding-bottom: 8px;
  box-shadow: 0 2px 4px 0 rgba(219, 218, 218, 0.2),
    0 6px 20px 0 rgba(226, 223, 223, 0.19);
}
#app img {
  width: 160px;
  height: 150px;
  border-radius: 5px;
}
.title {
  font-size: 12px;
  font-family: '黑体';

  p {
    margin: 0;
    padding: 0;
    text-align: left;
    width: 90%;
    margin: 0 auto;
    line-height: 22px;
    font-size: 15px;

    span {
      &:first-child {
        font-size: 12px;
        display: inline-block;
        width: 38px;
        height: 18px;
        background-color: #51b0a2;
        color: white;
        border-radius: 5px;
        line-height: 18px;
        text-align: center;
        margin-right: 5px;
      }
    }
  }
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  font-size: 16px;
  padding: 10px 0 0 0;

  span {
    &:first-child {
      i {
        // background: red;
        margin-right: -8px;
      }
    }
  }
}
.position {
  color: rgb(224, 108, 108);
  padding: 0 10px 0 0;
}
</style>
